<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple-css-slider</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            text-align: center;
            position: relative;
        }

        div.css-slider {
            top: 50%;
            transform: translateY(-50%);
            font-size: 1000px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            width: .322em;
            height: .250em;
            border-color: transparent;
            border-style: solid;
            border-width: .003em .004em .002em .004em;
            box-shadow: 0 0 0 .001em #ccc;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 100% .220em;
        }

        .css-slider div.pic-nav {
            width: 200%;
        }

        .css-slider div.pic-nav a {
            transform: translateY(.222em);
            display: inline-block;
            float: left;
            width: .030em;
            height: .026em;
            margin-right: .002em;
            background-color: #def;
            background-size: cover;
            background-position: 0 0;
            background-repeat: no-repeat;
        }

        .css-slider div.pic-nav a:hover {
            box-shadow: 0 0 .001em .001em rgba(243, 112, 33, .5);
        }

        .css-slider div.pic-nav a:hover ~ a.bg {
            animation-name: hoverSwitch;
            animation-duration: 20s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-fill-mode: both;
            animation-play-state: running;
        }

        .css-slider div.pic-nav a:nth-of-type(1):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(1) {
            border-left: 0;
            background-image: url(./img/pic-window/1.jpeg);
            --background-image: url(./img/pic-window/1.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(2):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(2) {
            background-image: url(./img/pic-window/2.jpeg);
            --background-image: url(./img/pic-window/2.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(3):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(3) {
            background-image: url(./img/pic-window/3.jpeg);
            --background-image: url(./img/pic-window/3.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(4):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(4) {
            background-image: url(./img/pic-window/4.jpeg);
            --background-image: url(./img/pic-window/4.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(5):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(5) {
            background-image: url(./img/pic-window/5.jpeg);
            --background-image: url(./img/pic-window/5.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(6):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(6) {
            background-image: url(./img/pic-window/6.jpeg);
            --background-image: url(./img/pic-window/6.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(7):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(7) {
            background-image: url(./img/pic-window/7.jpeg);
            --background-image: url(./img/pic-window/7.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(8):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(8) {
            background-image: url(./img/pic-window/8.jpeg);
            --background-image: url(./img/pic-window/8.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(9):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(9) {
            background-image: url(./img/pic-window/9.jpeg);
            --background-image: url(./img/pic-window/9.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(10):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(10) {
            background-image: url(./img/pic-window/10.jpeg);
            --background-image: url(./img/pic-window/10.jpeg);
            border-right: 0;
        }

        .css-slider div.pic-nav a:nth-last-of-type(1) {
            position: relative;
            left: 0;
            top: 0;
            float: left;
            transform: translateY(-.026em);
            display: block;
            clear: both;
            width: 50%; /*这里写50%是因为父元素的宽度为祖父级元素的200%, 写50%刚好为祖父级元素(就是.css-slider)宽度的100%, 方便后边设置background-size*/
            height: .219em;
            background-repeat: no-repeat;
            background-image: url(./img/pic-window/11.jpeg);
            background-position: 0 0;
            background-size: 110% calc(.220em + .022em);
            -webkit-animation: switch 50s infinite;
        }

        @keyframes hoverSwitch {
            0%, 100% {
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, 0);
                background-image: var(--background-image);
                background-position: -.006em -.006em;
                opacity: 1;
            }

            16.6% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, .8);
                opacity: .7;
                background-position: left -.004em top -.005em;
            }

            33.3% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, 0);
                opacity: 1;
                background-position: left -.002em top -.004em;
            }

            49.9% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, .8);
                opacity: .7;
                background-position: left -.003em top 0em;
            }

            66.6% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, 0);
                opacity: .7;
                background-position: left -.004em top -.002em;
            }

            83.3% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, .8);
                opacity: .7;
                background-position: left -.005em top -.004em;
            }
        }

        @keyframes switch {
            0%, 100% {
                background-image: url(./img/pic-window/1.jpeg);
            }
            10% {
                background-image: url(./img/pic-window/2.jpeg);
            }
            20% {
                background-image: url(./img/pic-window/3.jpeg);
            }
            30% {
                background-image: url(./img/pic-window/4.jpeg);
            }
            40% {
                background-image: url(./img/pic-window/5.jpeg);
            }
            50% {
                background-image: url(./img/pic-window/6.jpeg);
            }
            60% {
                background-image: url(./img/pic-window/7.jpeg);
            }
            70% {
                background-image: url(./img/pic-window/8.jpeg);
            }
            80% {
                background-image: url(./img/pic-window/9.jpeg);
            }
            90% {
                background-image: url(./img/pic-window/10.jpeg);
            }
        }

    </style>
</head>
<body>

<div class="css-slider">
    <div class="pic-nav">
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a class="bg last-nth-of-type-1"></a>
    </div>
</div>

</body>
</html>
